<template>
  <div @click="$emit('click')" class="ui-field">
    <div
      class="ui-field__label"
      :style="{width: labelWidth}">
      {{label}}
    </div>
    <div class="ui-field__value">
      <div class="ui-field__body">
        <slot v-if="$slots.input" name="input" />
        <input v-else v-bind:readonly="readonly" v-model="inputVal" :placeholder="placeholder" class="ui-field__input" type="text">
      </div>
      <div v-if="$slots.right" class="ui-field__right">
        <slot name="right" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'GzhbField',
    props: {
      value: {
        type: String
      },
      label: {
        type: String,
        default() {
          return '字段名'
        }
      },
      labelWidth: {
        type: String,
        default() {
          return '27.4%'
        }
      },      
      placeholder: {
        type: String,
        default() {
          return ''
        }
      },
      readonly: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    created() {
      this.inputVal = this.value
    },
    watch: {
      value(n) {
        this.inputVal = n
      },
      inputVal(n) {
        this.$emit('input', n)
      }
    },
    data() {
      return {
        inputVal: ''
      }
    }
  }
</script>

<style lang="less" scoped>
.ui-field {
  position: relative;
  display: flex;
  padding: 15px 0;
  font-size: 0.12rem;
  line-height: 4.74vw;  
}
.ui-field .ui-cell{
  padding: 0;
}
.ui-field__label {
  text-align: right;
  color: #9a9a9a;
}
.ui-field__value {
  flex: 1;
  padding-left: 0.625vw;
  display: flex;
  position: relative;
}
.ui-field+.ui-field:after {
  position: absolute;
  content: ' ';
  pointer-events: none;
  right: 0;
  top: -1px;
  left: 0px;
  border-bottom: 1px solid #ebedf0;
}
.ui-field__body {
  width: 100%;
}
.ui-field__input {
  width: 100%;
}
.ui-field__right {
  padding-right: 15px;
  padding-left: 4px;
}
</style>